<template>
  <div class="dashboard">
    <!-- 欢迎信息 -->
    <div class="welcome-card">
      <el-card shadow="hover">
        <div class="welcome-content">
          <div class="welcome-text">
            <h2>欢迎回来，{{ userStore.userInfo?.nickname || userStore.userInfo?.username }}！</h2>
            <p>今天是 {{ currentDate }}，祝您工作愉快！</p>
          </div>
          <div class="welcome-avatar">
            <el-avatar :src="userStore.userInfo?.avatar" :size="80">
              <el-icon size="40"><User /></el-icon>
            </el-avatar>
          </div>
        </div>
      </el-card>
    </div>
    
    <!-- 统计卡片 -->
    <div class="stats-cards">
      <el-row :gutter="20">
        <el-col :xs="24" :sm="12" :md="6" :lg="6">
          <el-card shadow="hover" class="stats-card">
            <div class="stats-content">
              <div class="stats-icon user-icon">
                <el-icon size="24"><User /></el-icon>
              </div>
              <div class="stats-info">
                <div class="stats-number">{{ stats.userCount }}</div>
                <div class="stats-label">用户总数</div>
              </div>
            </div>
          </el-card>
        </el-col>
        
        <el-col :xs="24" :sm="12" :md="6" :lg="6">
          <el-card shadow="hover" class="stats-card">
            <div class="stats-content">
              <div class="stats-icon online-icon">
                <el-icon size="24"><Connection /></el-icon>
              </div>
              <div class="stats-info">
                <div class="stats-number">{{ stats.onlineCount }}</div>
                <div class="stats-label">在线用户</div>
              </div>
            </div>
          </el-card>
        </el-col>
        
        <el-col :xs="24" :sm="12" :md="6" :lg="6">
          <el-card shadow="hover" class="stats-card">
            <div class="stats-content">
              <div class="stats-icon visit-icon">
                <el-icon size="24"><View /></el-icon>
              </div>
              <div class="stats-info">
                <div class="stats-number">{{ stats.visitCount }}</div>
                <div class="stats-label">今日访问</div>
              </div>
            </div>
          </el-card>
        </el-col>
        
        <el-col :xs="24" :sm="12" :md="6" :lg="6">
          <el-card shadow="hover" class="stats-card">
            <div class="stats-content">
              <div class="stats-icon message-icon">
                <el-icon size="24"><Message /></el-icon>
              </div>
              <div class="stats-info">
                <div class="stats-number">{{ stats.messageCount }}</div>
                <div class="stats-label">未读消息</div>
              </div>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>
    
    <!-- 快捷操作 -->
    <div class="quick-actions">
      <el-card shadow="hover">
        <template #header>
          <div class="card-header">
            <span>快捷操作</span>
          </div>
        </template>
        
        <el-row :gutter="20">
          <el-col :xs="24" :sm="12" :md="8" :lg="6">
            <div class="action-item" @click="$router.push('/user')">
              <el-icon size="32" color="#409EFF"><User /></el-icon>
              <div class="action-text">
                <div class="action-title">用户管理</div>
                <div class="action-desc">管理系统用户</div>
              </div>
            </div>
          </el-col>
          
          <el-col :xs="24" :sm="12" :md="8" :lg="6">
            <div class="action-item">
              <el-icon size="32" color="#67C23A"><Setting /></el-icon>
              <div class="action-text">
                <div class="action-title">系统设置</div>
                <div class="action-desc">配置系统参数</div>
              </div>
            </div>
          </el-col>
          
          <el-col :xs="24" :sm="12" :md="8" :lg="6">
            <div class="action-item">
              <el-icon size="32" color="#E6A23C"><Document /></el-icon>
              <div class="action-text">
                <div class="action-title">日志查看</div>
                <div class="action-desc">查看系统日志</div>
              </div>
            </div>
          </el-col>
          
          <el-col :xs="24" :sm="12" :md="8" :lg="6">
            <div class="action-item">
              <el-icon size="32" color="#F56C6C"><Monitor /></el-icon>
              <div class="action-text">
                <div class="action-title">系统监控</div>
                <div class="action-desc">监控系统状态</div>
              </div>
            </div>
          </el-col>
        </el-row>
      </el-card>
    </div>
    
    <!-- 最近活动 -->
    <div class="recent-activities">
      <el-card shadow="hover">
        <template #header>
          <div class="card-header">
            <span>最近活动</span>
            <el-button type="text" size="small">查看更多</el-button>
          </div>
        </template>
        
        <el-timeline>
          <el-timeline-item
            v-for="(activity, index) in activities"
            :key="index"
            :timestamp="activity.time"
            :type="activity.type"
          >
            {{ activity.content }}
          </el-timeline-item>
        </el-timeline>
      </el-card>
    </div>
  </div>
</template>

<script setup lang="ts">
import {computed, onMounted, ref} from 'vue'
import {useUserStore} from '@/stores/user'

const userStore = useUserStore()

// 当前日期
const currentDate = computed(() => {
  return new Date().toLocaleDateString('zh-CN', {
    year: 'numeric',
    month: 'long',
    day: 'numeric',
    weekday: 'long'
  })
})

// 统计数据
const stats = ref({
  userCount: 1234,
  onlineCount: 89,
  visitCount: 2567,
  messageCount: 12
})

// 最近活动
const activities = ref([
  {
    content: '用户 admin 登录了系统',
    time: '2024-01-15 10:30:00',
    type: 'primary'
  },
  {
    content: '创建了新用户 test001',
    time: '2024-01-15 09:15:00',
    type: 'success'
  },
  {
    content: '修改了系统配置',
    time: '2024-01-15 08:45:00',
    type: 'warning'
  },
  {
    content: '备份了数据库',
    time: '2024-01-14 23:00:00',
    type: 'info'
  }
])

// 加载统计数据
const loadStats = async () => {
  try {
    // 这里可以调用API获取真实的统计数据
    // const response = await getStats()
    // stats.value = response.data
  } catch (error) {
    console.error('加载统计数据失败:', error)
  }
}

onMounted(() => {
  loadStats()
})
</script>

<style scoped>
.dashboard {
  padding: 0;
}

.welcome-card {
  margin-bottom: 20px;
}

.welcome-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.welcome-text h2 {
  margin: 0 0 8px 0;
  color: #333;
  font-size: 24px;
}

.welcome-text p {
  margin: 0;
  color: #666;
  font-size: 14px;
}

.stats-cards {
  margin-bottom: 20px;
}

.stats-card {
  margin-bottom: 20px;
}

.stats-content {
  display: flex;
  align-items: center;
}

.stats-icon {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 16px;
}

.user-icon {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
}

.online-icon {
  background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
  color: white;
}

.visit-icon {
  background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
  color: white;
}

.message-icon {
  background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
  color: white;
}

.stats-info {
  flex: 1;
}

.stats-number {
  font-size: 28px;
  font-weight: bold;
  color: #333;
  line-height: 1;
}

.stats-label {
  font-size: 14px;
  color: #666;
  margin-top: 4px;
}

.quick-actions {
  margin-bottom: 20px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.action-item {
  display: flex;
  align-items: center;
  padding: 16px;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s;
  margin-bottom: 16px;
}

.action-item:hover {
  background: #f5f5f5;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.action-text {
  margin-left: 12px;
}

.action-title {
  font-size: 16px;
  font-weight: bold;
  color: #333;
  margin-bottom: 4px;
}

.action-desc {
  font-size: 12px;
  color: #666;
}

.recent-activities {
  margin-bottom: 20px;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .welcome-content {
    flex-direction: column;
    text-align: center;
  }
  
  .welcome-avatar {
    margin-top: 16px;
  }
  
  .stats-content {
    justify-content: center;
  }
  
  .action-item {
    justify-content: center;
    text-align: center;
  }
}
</style>